<template>
  <div>
    <h1>index</h1>
    <el-input v-model="state.val"/><br/>
    <el-button @click="routerToLink('/b')">路由跳转到{{state.val}}</el-button><br/>
    <el-button @click="windowToLink('/b')">window打开{{state.val}}</el-button><br/>
    <el-button @click="locationToLink('/b')">重定向到{{state.val}}</el-button><br/>
    <div style="width: 200px;height: 100px;" v-loading="state.loadingCode">
      <img style="width: 100%;height: 100%;" class="__hover" :src="state.codeBase64" @click="getCode"/>
    </div>
  </div>
</template>

<script setup lang="ts">
import {getCurrentInstance, onMounted, reactive} from "vue";
import {useRouter} from "vue-router";
import {captcha} from "@/api/modules/manage/user";

const router = useRouter()
const {proxy} = getCurrentInstance()
const state: any = reactive({
  codeBase64: '',
  loadingCode: false,
  val: '',
})
const routerToLink = (url) => {
  router.push(url)
}
const windowToLink = (url) => {
  window.open(url, "_blank");
}
const locationToLink = (url) => {
  window.location.replace(url);

}
const getCode = () => {
  state.loadingCode = true
  captcha().then(res => {
    state.codeBase64 = res.data.captcherImg
    state.loadingCode = false
  })
}
onMounted(() => {
  getCode()
})
</script>

<style lang="scss" scoped>
</style>
